My component:
Vue.component("product-list", {
props: ["products", "maximum-price"],
template: `
<div>
<div class="row d-flex mb-3 align-items-center p-3 rounded-3 animate__animated animate__fadeInLeft" v-for="(item, index) in products" :key="index" v-if="item.price <= Number(maximum-price)" style="background-color: #e3e3e3">
<!-- Col-1 -->
<div class="col-1">
<button class="btn btn-warning" @click="addItem(item)">Beli</button>
</div>
<!-- Col-2 -->
<div class="col-sm-4">
<img :src="item.image" :alt="item.name" class="img-fluid d-block" />
</div>
<!-- Col-3 -->
<div class="col">
<h3 class="text-info">{{ item.name }}</h3>
<p class="mb-0">{{ item.description }}</p>
<div class="h5 float-end">
<price-card :prefix="'$'" :value="item.price" :precision="3"></price-card>
</div>
</div>
</div>
</div>
`,
});
It create on js file, then i call it on html file like:
<product-list :products="products" :maximum-price="maximumPrice"></product-list>
products value are object-array, maximumPrice are 25 (integer), price-card component in my product-list component just show the value of item.
What should i do for solve this?
the prop definition should be written in camelCase format in the child component :
props: ["products", "maximumPrice"],
and used with same format in your template :
v-if="item.price <= Number(maximumPrice)"
Variables with dashes are invalid in js.
So when you are doing this: Number(maximum-price)
It's interpreted as Number(maximum 'minus' price).
That's why you have this error message: Property or method "maximum" is not defined on the instance but referenced during render. Because it's looking for a variable maximum and a variable price.
What you can do is change the naming to maximum_price for example.